<template>
  <div>
    <div v-if="!showEdit" class="container">
      <div class="header">
        <!-- <el-button style="margin-left:30px;" @click.prevent="BatchConfirmation" type="danger" plain size="medium"
            >全部确认</el-button
          > -->
        <div style="margin-left: 30px">
          <lin-search @query="onQueryChange" ref="searchKeyword" />
        </div>
        <div style="margin-left: 30px">
          <el-date-picker
            v-model="value"
            @change="selectTime"
            type="datetimerange"
            start-placeholder="开始采集日期"
            end-placeholder="结束采集日期"
            :default-time="['12:00:00']"
          >
          </el-date-picker>
        </div>
        <!-- <div class="title" style="margin-left:30px;">电量:</div> 
          <el-select v-model="input.collector_power" placeholder="请选择" style="width: 10%;">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <div class="title">温度状态:</div> 
          <el-select v-model="input.tresult" placeholder="请选择" style="width: 10%;">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <div class="title">湿度状态:</div> 
          <el-select v-model="input.hresult" placeholder="请选择" style="width: 10%;">
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select> -->
      </div>
      <div class="header">
        <div class="title">采集器名称:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门名称:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关名称:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 16px">
          <el-button @click.prevent="queryEdit()" type="success" plain>查询</el-button>
        </div>
        <div style="margin-left: 8px">
          <el-button @click.prevent="ResetEdit()" type="warning" plain>重置</el-button>
        </div>
        <div style="margin-left: 8px">
          <el-button @click.prevent="plusEdit()" icon="el-icon-plus" circle size="mini"></el-button>
        </div>
      </div>
      <div class="header" v-show="plusValue.value1">
        <div class="title">采集器名称:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input1.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门名称:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input1.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关名称:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input1.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 8px">
          <el-button @click.prevent="minusEdit(1)" icon="el-icon-minus" circle size="mini"></el-button>
        </div>
      </div>
      <div class="header" v-show="plusValue.value2">
        <div class="title">采集器名称:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input2.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门名称:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input2.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关名称:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input2.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 8px">
          <el-button @click.prevent="minusEdit(2)" icon="el-icon-minus" circle size="mini"></el-button>
        </div>
      </div>
      <div class="header" v-show="plusValue.value3">
        <div class="title">采集器名称:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input3.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门名称:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input3.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关名称:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input3.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 8px">
          <el-button @click.prevent="minusEdit(3)" icon="el-icon-minus" circle size="mini"></el-button>
        </div>
      </div>
      <div class="header" v-show="plusValue.value4">
        <div class="title">采集器名称:</div>
        <el-input
          clearable
          placeholder="输入采集器名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input4.collector_name"
          style="width: 12%"
        ></el-input>
        <div class="title">部门名称:</div>
        <el-input
          clearable
          placeholder="输入部门名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input4.dwmc"
          style="width: 12%"
        ></el-input>
        <div class="title">网关名称:</div>
        <el-input
          clearable
          placeholder="输入网关名称"
          size="medium"
          prefix-icon="el-icon-search"
          v-model="input4.bgateway_name"
          style="width: 12%"
        ></el-input>
        <div style="margin-left: 8px">
          <el-button @click.prevent="minusEdit(4)" icon="el-icon-minus" circle size="mini"></el-button>
        </div>
      </div>
      <div></div>
      <transition name="fade">
        <div class="search" v-if="keyword">
          <p class="search-tip">
            搜索“<span class="search-keyword">{{ keyword }}</span
            >”， 找到 <span class="search-num">{{ totalNums }}</span> 条信息
          </p>
          <button class="search-back" @click="backInit">返回全部记录</button>
        </div>
      </transition>

      <!-- 按钮视图 -->
      <el-button
        v-for="(carData, index) in tableData"
        :key="index"
        :type="dataChart.includes(carData.collector_id) ? 'success' : 'info'"
        size="mini"
        @click.prevent="handleEdit(carData)"
        >{{ carData.collector_name }}</el-button
      >
      <el-button @click.prevent="onTSH()" icon="el-icon-refresh-right" size="mini"></el-button>
      <div class="container2">
        <el-row :gutter="20">
          <el-col>
            <div class="grid-content bg-purple">
              <!-- <div id="line1"></div> -->
              <div id="main" style="width: 100%; height: 500px"></div>
            </div>
          </el-col>
          <!-- <el-col :span="8" class="none">
            <div class="grid-content bg-purple">
              
            </div>
          </el-col> -->
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <div class="grid-content bg-purple">
              <div id="main2" style="width: 100%; height: 500px"></div>
              <!-- <div id="line2"></div> -->
            </div>
          </el-col>
          <!-- <el-col :span="8" class="none">
            <div class="grid-content bg-purple">
              
            </div>
          </el-col> -->
        </el-row>
      </div>
      <!-- <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :background="true"
          :page-size="pageCount"
          :current-page="currentPage"
          v-if="refreshPagination"
          layout="prev, pager, next, jumper"
          :total="totalNums"
        ></el-pagination>
      </div> -->
    </div>
    <chartCollection-edit
      v-else
      @editClose="editClose"
      :chartCollectionId="chartCollectionId"
      :isCreate="isCreate"
    ></chartCollection-edit>
  </div>
</template>

<script>
import LinSearch from '@/component/base/search/lin-search'
import chartCollection from '@/model/chartCollection'
import chartCollectionEdit from './chartCollection-edit'
// import { Line } from '@antv/g2plot'
//导入echarts
import * as echarts from 'echarts'

export default {
  components: { LinSearch, chartCollectionEdit },
  data() {
    return {
      data1: [],
      data2: [],
      dataChart: [],
      chartCollectionId: null,
      isCreate: false,
      tableData: [],
      showEdit: false,
      totalNums: 0,
      currentPage: 1,
      pageCount: 999999,
      refreshPagination: true,
      keyword: null,
      StartTime: '',
      EndTime: '',
      searchKeyword: '',
      plusValue: {
        value1: false,
        value2: false,
        value3: false,
        value4: false,
      }, //增加查询条件-哨值
      putData: {
        state: '已确认',
      },
      value: null,
      input: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
        collector_power: '',
        tresult: '',
        hresult: '',
      },
      input1: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
      },
      input2: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
      },
      input3: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
      },
      input4: {
        dwmc: '',
        bgateway_name: '',
        collector_name: '',
      },
      options1: [
        {
          value: '10',
          label: '< 10',
        },
        {
          value: '20',
          label: '< 20',
        },
        {
          value: '30',
          label: '< 30',
        },
        {
          value: '40',
          label: '< 40',
        },
        {
          value: '50',
          label: '< 50',
        },
        {
          value: '60',
          label: '< 60',
        },
        {
          value: '70',
          label: '< 70',
        },
        {
          value: '80',
          label: '< 80',
        },
        {
          value: '90',
          label: '< 90',
        },
        {
          value: '',
          label: '所有状态',
        },
      ],
      options2: [
        {
          value: '正常',
          label: '正常',
        },
        {
          value: '超高',
          label: '超高限',
        },
        {
          value: '超低',
          label: '超低限',
        },
        {
          value: '',
          label: '所有状态',
        },
      ],
      options3: [
        {
          value: '正常',
          label: '正常',
        },
        {
          value: '超高',
          label: '超高限',
        },
        {
          value: '超低',
          label: '超低限',
        },
        {
          value: '',
          label: '所有状态',
        },
      ],
      ur_WD_G: '@/assets/image/wsd/WD_G.png',
      ur_WD_ZC: '@/assets/image/wsd/WD_ZC.png',
      ur_WD_D: '@/assets/image/wsd/WD_D.png',
      ur_SD_G: '@/assets/image/wsd/SD_G.png',
      ur_SD_ZC: '@/assets/image/wsd/SD_ZC.png',
      ur_SD_D: '@/assets/image/wsd/SD_D.png',
    }
  },
  async created() {
    this.loading = true
    this.getchartCollections()
    this.getmaps1()
    this.getmaps2()
    this.loading = false
    this.getmaps1()
    this.getmaps2()
  },
  watch: {
    // 关键字搜索
    searchKeyword(newVal) {
      if (newVal) {
        this.keyword = newVal
        if (this.value == null) {
          this.StartTime = ''
          this.EndTime = ''
        } else {
          this.StartTime = this.value[0]
          this.EndTime = this.value[1]
        }
        if (this.searchUser) {
          this.keyword = `${newVal}`
        }
      } else {
        this.keyword = ''
        this.$refs.searchKeyword.clear()
      }
      this.searchPage()
    },
    value(newVal) {
      this.searchPage()
    },
  },
  methods: {
    onTSH() {
      this.getmaps1()
      this.getmaps2()
    },
    onDataChart() {
      this.dataChart = []
      for (var i = 0; i < this.tableData.length; i++) {
        this.dataChart.push(this.tableData[i].collector_id)
      }
      //   this.$message({
      //       showClose: true,
      //       message: this.dataChart
      // });
    },
    async chart1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      var legendDatas = []
      var xAxisDatas = []
      var seriesDatas = []

      // for(var i;i < this.dataChart.length;i++){
      if (this.dataChart.length > 0) {
        for (var i = 0; i < this.dataChart.length; i++) {
          const id = this.dataChart[i]
          const maps = await chartCollection.maptemperature({
            id,
            StartTime: this.StartTime,
            EndTime: this.EndTime,
          })
          if (maps[0].type) {
            legendDatas.push(maps[0].type)
          }
          if (i == 0) {
            for (var j = 0; j < maps.length; j++) {
              xAxisDatas.push(maps[j].month)
            }
          }
          var SDatas = []
          for (var j = 0; j < maps.length; j++) {
            SDatas.push(maps[j].value)
          }
          // SDatas.reverse()
          var SDatas2 =
            //数据点3
            {
              name: maps[0].type,
              type: 'line',
              // stack: '温度值',
              data: SDatas,
            }
          seriesDatas.push(SDatas2)
        }
      }

      // xAxisDatas.reverse()
      var option = {
        title: {
          text: '温度-变化趋势图',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: legendDatas, //数据点1
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          inverse: true,
          data: xAxisDatas, //数据点2
        },
        yAxis: {
          type: 'value',
          position: 'right',
          position: 'top',
          axisLabel: {
            formatter: '{value} °C',
          },
        },
        series: seriesDatas, //数据点3
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'inside',
            xAxisIndex: [0],
            filterMode: 'none',
            start: 0,
            end: 50,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。 Chart
      myChart.clear()
      myChart.setOption(option)
      // document.getElementByID('line1').innerHTML = "";
      //   new Line('line1', {
      //   title: {
      //     visible: true,
      //     text: '温度(℃)-变化趋势',
      //   },
      //   data: this.data1,
      //   forceFit: true,
      //   seriesField: 'type',
      //   xField: 'month',
      //   yField: 'value',
      //   smooth: true,
      //   color: ['	#9B30FF','#FFFF00','#FF6347','#4577FF', '#00C292', '#00C108','#21776F', '#076292', '#F68108','#4317FF', '#075192', '#F14108'],
      //   legend: {
      //     visible: true,
      //     position: 'top-right',
      //   },
      //   axisLabel: {
      //     interval: 3,//如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
      //     rotate: '45',// 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
      //   },
      // }).render()
    },
    async getmaps1() {
      // const { StartTime } = this
      // const { EndTime } = this
      const id = 1
      const maps = await chartCollection.maptemperature({
        id,
        StartTime: this.StartTime,
        EndTime: this.EndTime,
      })
      this.data1 = maps
      this.chart1()
      //   this.$message({
      //   showClose: true,
      //   message: maps
      // });
      // myChart.clear();
    },
    async chart2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main2'))
      var legendDatas = []
      var xAxisDatas = []
      var seriesDatas = []

      // for(var i;i < this.dataChart.length;i++){
      if (this.dataChart.length > 0) {
        for (var i = 0; i < this.dataChart.length; i++) {
          const id = this.dataChart[i]
          const maps = await chartCollection.maphumidity({
            id,
            StartTime: this.StartTime,
            EndTime: this.EndTime,
          })
          if (maps[0].type) {
            legendDatas.push(maps[0].type)
          }
          if (i == 0) {
            for (var j = 0; j < maps.length; j++) {
              xAxisDatas.push(maps[j].month)
            }
          }
          var SDatas = []
          for (var j = 0; j < maps.length; j++) {
            SDatas.push(maps[j].value)
          }
          // SDatas.reverse()
          var SDatas2 =
            //数据点3
            {
              name: maps[0].type,
              type: 'line',

              data: SDatas,
            }
          seriesDatas.push(SDatas2)
        }
      }
      // for(var i=0 ; i <this.data1.length; i++){
      //   xAxisDatas.push(this.data1[i].month)
      // }
      // xAxisDatas.reverse()
      var option = {
        title: {
          text: '湿度-变化趋势图',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: legendDatas, //数据点1
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          // show: true,
          feature: {
            // dataZoom: {
            //     yAxisIndex: 'none'
            // },
            // dataView: {readOnly: false},
            // magicType: {type: ['line', 'bar']},
            // restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          inverse: true,
          data: xAxisDatas, //数据点2
        },
        yAxis: {
          type: 'value',
          position: 'right',
          position: 'top',
          axisLabel: {
            formatter: '{value} %RH',
          },
        },
        series: seriesDatas, //数据点3
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'inside',
            xAxisIndex: [0],
            filterMode: 'none',
            start: 0,
            end: 50,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。 Chart
      myChart.clear()
      myChart.setOption(option)
    },
    async getmaps2() {
      const id = 1
      const maps = await chartCollection.maphumidity({
        id,
        StartTime: this.StartTime,
        EndTime: this.EndTime,
      })
      this.data2 = maps
      this.chart2()
    },
    async getchartCollections() {
      this.getmaps1()
      this.getmaps2()

      const page = this.currentPage - 1
      const count = this.pageCount
      const { StartTime } = this
      const { EndTime } = this
      const chartCollections = await chartCollection.getchartCollections(
        {
          StartTime,
          EndTime,
          page,
          count,
          dwmc: this.input.dwmc,
          bgateway_name: this.input.bgateway_name,
          collector_name: this.input.collector_name,
          collector_power: this.input.collector_power,
          tresult: this.input.tresult,
          hresult: this.input.hresult,

          dwmc1: this.input1.dwmc,
          bgateway_name1: this.input1.bgateway_name,
          collector_name1: this.input1.collector_name,
          dwmc2: this.input2.dwmc,
          bgateway_name2: this.input2.bgateway_name,
          collector_name2: this.input2.collector_name,
          dwmc3: this.input3.dwmc,
          bgateway_name3: this.input3.bgateway_name,
          collector_name3: this.input3.collector_name,
          dwmc4: this.input4.dwmc,
          bgateway_name4: this.input4.bgateway_name,
          collector_name4: this.input4.collector_name,
        },
        this.input,
      )
      this.tableData = chartCollections.items
      this.onDataChart()
      for (let i = 0; i < this.pageCount; i++) {
        const index = this.tableData[i].collector_time.indexOf('T')
        this.tableData[i].collector_time = `${this.tableData[i].collector_time.slice(0, index)} ${this.tableData[
          i
        ].collector_time.slice(index + 1, index + 9)}`
      }
      this.totalNums = chartCollections.total
      this.initImgSrcList()
    },
    async searchPage() {
      this.getmaps1()
      this.getmaps2()
      const page = this.currentPage - 1
      const count = 999999
      const datas = await chartCollection.search({
        keyword: this.searchKeyword,
        StartTime: this.StartTime,
        EndTime: this.EndTime,
        page,
        count,
        dwmc: this.input.dwmc,
        bgateway_name: this.input.bgateway_name,
        collector_name: this.input.collector_name,
        collector_power: this.input.collector_power,
        tresult: this.input.tresult,
        hresult: this.input.hresult,

        dwmc1: this.input1.dwmc,
        bgateway_name1: this.input1.bgateway_name,
        collector_name1: this.input1.collector_name,
        dwmc2: this.input2.dwmc,
        bgateway_name2: this.input2.bgateway_name,
        collector_name2: this.input2.collector_name,
        dwmc3: this.input3.dwmc,
        bgateway_name3: this.input3.bgateway_name,
        collector_name3: this.input3.collector_name,
        dwmc4: this.input4.dwmc,
        bgateway_name4: this.input4.bgateway_name,
        collector_name4: this.input4.collector_name,
      })
      this.tableData = datas.items
      this.totalNums = datas.total
      this.onDataChart()
      for (let i = 0; i < this.pageCount; i++) {
        const index = this.tableData[i].collector_time.indexOf('T')
        this.tableData[i].collector_time = `${this.tableData[i].collector_time.slice(0, index)} ${this.tableData[
          i
        ].collector_time.slice(index + 1, index + 9)}`
      }
    },
    initImgSrcList() {
      this.tableData.forEach(item => {
        if (!item.img) {
          return
        }
        this.imgSrcList.push(item.img)
      })
    },
    selectTime() {
      if (this.value == null) {
        this.StartTime = ''
        this.EndTime = ''
      } else {
        this.StartTime = this.value[0]
        this.EndTime = this.value[1]
      }
      if (this.keyword == '') {
        this.getchartCollections()
      } else {
        this.searchPage()
      }
    },
    async handleCurrentChange(val) {
      this.imgSrcList = []
      this.currentPage = val
      this.loading = true
      if (this.keyword == '') {
        this.getchartCollections()
      } else {
        this.searchPage()
      }
      this.loading = false
    },
    handleEdit(val) {
      //dataChart
      if (!this.dataChart.includes(val.collector_id)) {
        this.dataChart.push(val.collector_id)
      } else {
        var index = this.dataChart.indexOf(val.collector_id)
        if (index != -1) {
          this.dataChart.splice(index, 1)
        }
      }
      // this.$message({
      //   showClose: true,
      //   message: this.dataChart
      // });
      this.getmaps1()
      this.getmaps2()
    },
    editClose() {
      this.showEdit = false
      if (this.keyword == '') {
        this.getchartCollections()
      } else {
        this.searchPage()
      }
    },
    // eslint-disable-next-line
    cellStyleCb({ row, column, rowIndex, columnIndex }) {
      return 'long-text-hidden'
    },
    // 清空检索
    async backInit() {
      this.searchKeyword = ''
      this.keyword = ''
      this.tableData = []
      this.loading = true
      this.ResetEdit()
      this.loading = false
    },
    async onQueryChange(query) {
      this.searchKeyword = query.trim()
    },
    queryEdit() {
      if (this.keyword == '') {
        this.getchartCollections()
      } else {
        this.searchPage()
      }
    },
    ResetEdit() {
      ;(this.input.dwmc = ''),
        (this.input.bgateway_name = ''),
        (this.input.collector_name = ''),
        (this.input.collector_power = ''),
        (this.input.tresult = ''),
        (this.input.hresult = '')

      ;(this.input1.dwmc = ''),
        (this.input1.bgateway_name = ''),
        (this.input1.collector_name = ''),
        (this.input2.dwmc = ''),
        (this.input2.bgateway_name = ''),
        (this.input2.collector_name = ''),
        (this.input3.dwmc = ''),
        (this.input3.bgateway_name = ''),
        (this.input3.collector_name = ''),
        (this.input4.dwmc = ''),
        (this.input4.bgateway_name = ''),
        (this.input4.collector_name = '')

      if (this.keyword == '') {
        this.getchartCollections()
      } else {
        this.searchPage()
      }
    },
    plusEdit() {
      //增加查询条件--- +
      if (!this.plusValue.value1) {
        ;(this.input1.dwmc = ''),
          (this.input1.bgateway_name = ''),
          (this.input1.collector_name = ''),
          (this.plusValue.value1 = true)
        return
      }
      if (!this.plusValue.value2) {
        ;(this.input2.dwmc = ''),
          (this.input2.bgateway_name = ''),
          (this.input2.collector_name = ''),
          (this.plusValue.value2 = true)
        return
      }
      if (!this.plusValue.value3) {
        ;(this.input3.dwmc = ''),
          (this.input3.bgateway_name = ''),
          (this.input3.collector_name = ''),
          (this.plusValue.value3 = true)
        return
      }
      if (!this.plusValue.value4) {
        ;(this.input4.dwmc = ''),
          (this.input4.bgateway_name = ''),
          (this.input4.collector_name = ''),
          (this.plusValue.value4 = true)
        return
      }
    },
    minusEdit(data) {
      if (data == 1) {
        this.plusValue.value1 = false
        ;(this.input1.dwmc = ''), (this.input1.bgateway_name = ''), (this.input1.collector_name = '')
      } else if (data == 2) {
        this.plusValue.value2 = false
        ;(this.input2.dwmc = ''), (this.input2.bgateway_name = ''), (this.input2.collector_name = '')
      } else if (data == 3) {
        this.plusValue.value3 = false
        ;(this.input3.dwmc = ''), (this.input3.bgateway_name = ''), (this.input3.collector_name = '')
      } else if (data == 4) {
        this.plusValue.value4 = false
        ;(this.input4.dwmc = ''), (this.input4.bgateway_name = ''), (this.input4.collector_name = '')
      }
      if (this.keyword == '') {
        this.getchartCollections()
      } else {
        this.searchPage()
      }
    },
  },
  filters: {
    // onLine(val) {
    //   if (val === 1) {
    //     return '是'
    //   }
    //   return '否'
    // },
  },
}
</script>

<style lang="scss" scoped>
.container2 {
  padding: 20px;
  .el-row {
    .el-col {
      .grid-content {
        background: #ffffff;
        box-shadow: 0px 2px 14px 0px rgba(243, 243, 243, 1);
        border-radius: 8px;
        min-height: 36px;
        margin-bottom: 20px;
      }
    }
  }
}
@media screen and (max-width: 1200px) {
  .none {
    display: none;
  }
}
.container {
  padding: 0 30px;

  .header {
    display: flex;
    // justify-content: space-between;
    align-items: center;

    .title {
      height: 59px;
      line-height: 59px;
      color: $parent-title-color;
      font-size: 16px;
      font-weight: 500;
    }
  }

  .search {
    height: 52px;
    width: 100%;
    background: rgba(57, 99, 188, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 24px;
    margin-bottom: 24px;

    .search-tip {
      margin-left: 40px;
      height: 52px;
      line-height: 52px;
      color: #354058;
      font-size: 14px;

      .search-keyword {
        color: $theme;
      }

      .search-num {
        color: #f4516c;
      }
    }

    .search-back {
      margin: 8px 20px;
      height: 32px;
      background: #f4516c;
      border: none;
      border-radius: 2px;
      color: #fff;
      padding: 0 13px;
      font-size: 14px;
      cursor: pointer;
    }
  }

  .table_1 .warning-row {
    background: oldlace;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
  }
}

.long-text-hidden {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
